<template>
  <div class="screen">
    <header>
      顶部菜单
    </header>

    <div class="menuleft">
      左侧控件点击生成

      <em-button
        type="primary"
        round
        text="多选创建"
        @click="add('emCheckbox')"
      ></em-button>
      <em-button
        type="primary"
        round
        text="时间控件 创建"
        @click="add('emDatePicker')"
      ></em-button>

      <em-button
        type="primary"
        round
        text="单选按钮创建"
        @click="add('radioButton', '1')"
      ></em-button>

      <em-button
        type="primary"
        round
        text="单选按钮创建"
        @click="add('radioButton', '2')"
      ></em-button>

      <em-button
        type="primary"
        round
        text="单行文本框"
        @click="add('textBox')"
      ></em-button
      ><em-button
        type="primary"
        round
        text="下拉框"
        @click="add('dropdownBox')"
      ></em-button>
      <em-button
        type="primary"
        round
        text="图片"
        @click="add('gq-image')"
      ></em-button>
      <em-button
        type="primary"
        round
        text="DIV单选按钮创建"
        @click="add('radioButton')"
      ></em-button>
      <em-button
        type="primary"
        round
        text="签字功能"
        @click="add('signatureField')"
      ></em-button>
      <!-- <em-button type="primary" round text="单行文本框" @click="add(addobj)"></em-button> -->
      <!-- <em-button type="primary" round text="单行文本框" @click="add(addobj)"></em-button> -->
    </div>

    <section>
      呈现面板

      <div v-for="(item, index) in counter" :key="index">
        <drag @dbclick="handleDrag(`${item}${index}`)">
          <components
            :is="counter[index]"
            :ref="`${item}${index}`"
            @onprops="checkboxProps"
            @setSelect="setSelect"
            @updateCheckbox="updateCheckbox"
            >{{ item }}</components
          >
        </drag>
      </div>
    </section>

    <div class="menuright">
      属性面板
    </div>
  </div>
</template>

<script>
// import emCheckbox from "@/checkbox/checkbox.vue";
// import emDatePicker from "@/date-picker/datepicker.vue";
// import drag from "@/drag/index.vue";
// import textBox from "@/textBox/index.vue";
// import dropdownBox from "@/dropdownBox/index.vue";
// import newRadio from "@/newRadio/newRadio.vue";
export default {
  data() {
    return {
      activePanel: "", // 当前显示的面板组建
      counter: [],

      addobj: {
        name: "textBox",
        textBoxObj: {
          appearanceProp: {
            border: {
              type: "0", //0:none, 1:color
              color: "#f23636",
              width: 0.3,
            },
            fill: {
              type: "0", //0:none, 1:color
              color: "#423611",
            },
            text: {
              fontfamily: "宋体,simsun",
              fontSize: "18pt",
              isBold: false,
              isItalic: false,
              textColor: "#000000",
              textAlign: "left",
            },
          },
          dataField: "",
          maxlength: 10,
          readonly: false,
          required: false,
          title: "请输入...",
          createObject: {
            type: 1, //分类，0：界面控件，1：表单控件
            id: "textBox_XXXX", //标识，通过组件标识+序号构成
            x: "10px", //水平坐标
            y: "10px", //垂直坐标
            width: "40mm", //宽度
            height: "10mm", //高度
          },
        },
      },
    };
  },
  methods: {
    add(name, num) {
      this.counter.push(name);
      // console.log(this.counter);
    },
    handleDrag(name) {},
    checkboxProps(props) {
      console.log(props);
    },
    // 单选选中
    setSelect(value) {
      console.log(value.dataField, "value");
      let all = document.querySelectorAll(
        `div[dataField='${value.dataField}']`
      );

      all.forEach((v, i) => {
        console.log(v.getAttribute("gqValue"), value.selectNum);
        console.log();
        if (v.getAttribute("gqValue") != value.selectNum) {
          console.log((v.children[0].style.background = "none"));
        } else {
          v.children[0].style.background = "#409eff";
        }
      });
      console.log(this.caption1);
      alert(value.gqValue);
    },
    updateCheckbox(componentProps) {
      console.log(componentProps);
    },
  },
};
</script>
<style lang="scss" scope>
.screen {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 50px 1fr;
  grid-template-areas: "a a a" "b c d";
  place-items: stretch;
  > header {
    grid-area: a;
    background-color: #f5f5f5;
  }
  .menuleft {
    background-color: #f2f2f2;
    height: 560px !important;
  }
  > section {
    background-color: skyblue;
    position: relative;
  }
  .menuright {
    background-color: #a0a0a0;
    height: 560px !important;
  }
}
.em-btn {
  font-weight: 600;
}
</style>
